/**
* @Author: changDongdong
* @Date: 2023年4月26日18:53:46
* @Description: 项目中表格table 搜索头部的封装
* @param { columns }  父传子参数复用表格头部的对象
* i: object;                   formItem对象
		* i.placeholder: string    搜索提示字段(必传)
		* i.title: string;         左边字段值(必传)
		* i.dataIndex: string;     字段值(必传)
* i.options                    下拉选择(?按需传递)
		*i.options.value           key
		*i.options.cont            value
*/
import React, { useState, useEffect } from 'react';

import "./index.less";
import { Button, Form, Input, Select, Space, message } from "antd";


export default function SearchForm(props: any) {
	const { columns = [] } = props;
	const [formVal, setFormVal] = useState({});
	const { Option } = Select;
	const [form] = Form.useForm();

	const onFinish = (values: any) => {
		// console.log(values.user?.replace(EXP_TRIM, ''), '去除前后空格');
		// message.success("搜索的数据为 : " + JSON.stringify(values));
		// console.log(JSON.stringify(values));
		setFormVal(values)
	};

	useEffect(() => {
		props.handleChildValueChange(formVal)
	}, [formVal])

	// 重置
	const onReset = () => {
		form.resetFields();
	};

	// 提示
	const onFill = () => {
		form.setFieldsValue({
			name: "mark",
			age: "18",
			gender: "male",
			address: '月球'
		});
	};

	/**
	* @description  联动权限受控 例选择/填写小学时 只希望希望联动1 2 3 4 5 6年级, 选择/填写初中时联动7 8 9年级
	* @param { value } string  input values
	* @returns {String} 联动值
	*/
	const onGenderChange = (value: string) => {
		switch (value) {
			case "male":
				form.setFieldsValue({ name: "Hi, man!" });
				return;
			case "female":
				form.setFieldsValue({ name: "Hi, lady!" });
				return;
			case "other":
				form.setFieldsValue({ name: "Hi there!" });
		}
	};

	return (
		<div className="search-form"  >
			<Form form={form} name="control-hooks" onFinish={onFinish}>
				<div className="form-wrap" >
					{columns.map((i: any) => {
						return i.type == 'txt' ?
							<Form.Item name={i.dataIndex} label={i.title} key={i.title}>
								<Input placeholder={i.placeholder} />
							</Form.Item> :
							i.type == 'select' ?
								<Form.Item name={i.dataIndex} label={i.title}>
									<Select placeholder={i.placeholder} allowClear key={i.title} onChange={onGenderChange}  >
										{i.options.map((s: any) => {
											return <Option value={s.value} key={s.value}>{s.cont}</Option>
										})}
									</Select>
								</Form.Item> : ''
					})
					}

				</div>
				{/* 操作 */}
				<Form.Item className="form-echo" >
					<Space>
						<Button type="primary" htmlType="submit">
							提交
						</Button>
						<Button htmlType="button" onClick={onReset}>
							重置
						</Button>
						<Button type="ghost" htmlType="button" onClick={onFill}>
							提示
						</Button>
					</Space>
				</Form.Item>
			</Form>
		</div >
	);
}

